<template>
    <div class="wrapper">
        <div class="log">
            <img src="http://xl.9yuecloud.com/assets/img/login.a4c656a9.png" alt />
        </div>
        <div class="login">
            <van-form @submit="onSubmit">
                <van-field v-model="that.mobile" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="that.password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <div class="qie">
                    <span style="color:#999">找回密码</span>
                    <span @click="$router.push('/smslogin')">注册/验证码登录</span>
                </div>
                <div style="margin: 16px;">
                    <p class="avan-button" @click="onSubmit">登录</p>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script setup>
import { Toast } from 'vant';
import { reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { getSmsloginPort, getLoginPort } from '@/api/login'
const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
const router = useRouter()
let that = reactive({
    flag: false,
    mobile: '18910221653',
    password: '',
    sms_code: '',
    sms_type: 'login',
    type: 1,
    loginData: [],
    count: 10
})

let onSubmit = (values) => {
    if (!reg.test(that.mobile)) {
        Toast.fail({
            message: '手机号码格式不正确',
            position: 'top',
        })
        return false
    }
    gettLogin()
}
let gettLogin = async () => {
    let res = await getLoginPort({ mobile: that.mobile, password: that.password, type: that.type })
    console.log(res)

    if (res.code == 200) {
        that.loginData = res.data
        localStorage.setItem('token', res.data.remember_token)
        console.log(res);
        router.push('/')
    } else {
        Toast.fail({
            message: res.msg,
            position: 'top',
        })
    }
}
onMounted(() => { })
watch()
</script>
<style lang='scss' scoped>
.wrapper {
    box-sizing: border-box;
    width: 100%;
    padding: 40px;
    background: #fff;
    font-size: 16px;

    .van-toast {
        width: 200px;
        height: 200px;
    }

    .log {
        width: 100%;
        padding: 20px 0 50px 0;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 525px;
            height: 115px;
        }
    }

    .login {
        width: 100%;
        font-size: 20px;

        .qie {
            width: 90%;
            padding: 20px 0 20px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999;
        }
    }

    .van-field {
        height: 73px;
        padding: 0 40px 0 0;
        font-size: 24px;
        display: flex;
        align-items: center;

        div {
            font-size: 20px;
        }

        input {
            height: 73px;
        }
    }

    .avan-button {
        width: 82vw;
        height: 60px;
        line-height: 60px;
        font-size: 24px;
        color: #fff;
        text-align: center;
        border-radius: 40px;
        background-image: linear-gradient(to right, #f5b65e, #eb7834);
    }

}
</style>